<template>
  <div class="register" :style="backgroundimage">
    <div class="registerbody">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="账号" prop="username">
          <el-input v-model="ruleForm.username" autocomplete="off" placeholder="输入手机号码"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="ruleForm.nickname" autocomplete="off" placeholder="输入用户昵称"></el-input>
        </el-form-item>
         <el-form-item label="QQ" prop="nickname">
          <el-input v-model="ruleForm.qq" autocomplete="off" placeholder="输入用户QQ"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pwd">
          <el-input
            type="password"
            v-model="ruleForm.pwd"
            autocomplete="off"
            show-password
            placeholder="输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="确定密码" prop="pwd2">
          <el-input
            type="password"
            v-model="ruleForm.pwd2"
            autocomplete="off"
            show-password
            placeholder="确定密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="ruleForm.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像" prop="userIcon">
          <el-upload
            class="avatar-uploader"
            :action="uploadimageapi + '/usericonuploadimage'"
            :show-file-list="false"
            name="usericonfiles"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item prop="type">
          <el-checkbox v-model="checked" @change="drawer = true"
            >同意吾顺二手书交易网站服务协议</el-checkbox
          >
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            :disabled="!checked"
            @click="submitForm('ruleForm')"
            >立即注册</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
        <label class="lab"
          >已有账号？<span
            ><router-link :to="{ name: 'login' }">立即登录</router-link></span
          ></label
        >
      </el-form>
      <!-- 右边抽屉注册协议 -->
      <el-drawer
        title="吾顺二手书交易网站用户注册协议"
        :visible.sync="drawer"
        size="35%"
      >
        <div>
          在此特别提醒您在注册成为同意吾顺二手书交易网站用户之前,请认真阅读本《吾顺二手书交易网站用户注册协议》(以下简称“协议”),确保您充分理解本协议中各条款。请您审慎阅读并选择接受或不接受本协议。您同意并点击确认本协议条款且完成注册程序后,才能成为吾顺二手书交易网站的正式注册用户,并享受吾顺二手书交易网站的各类服务。您的注册、登录、使用等行为将视为对本协议的接受,并同意接受本协议各项条款的约束。若您不同意本协议,或对本协议中的条款存在任何疑问,请您立即停止吾顺二手书交易网站用户注册程序,并可以选择不使用吾顺二手书交易网站服务。
          吾顺二手书交易网站信息所收集您的个人信息，将仅用于吾顺二手书交易网站为您提供相关服务。一般情况下，在未得到您的同意之前，您的任何个人信息将不会被提供给无关的第三方。
          在下列情况下，我们可能会将您的个人信息提供给有关的第三方：
          (1)本网站/软件的某些服务需由一个合作伙伴(如代理公司、提供相关技术服务的公司、运输公司、邮寄公司、提供奖品的公司等)提供或共同提供。为了向您提供此类服务，本网站有必要与该合作伙伴分享您的个人信息。如果您不希望您的信息被分享，您可以不使用该具体服务从而拒绝您的个人信息被披露。
          (2)本网站/软件可能会与第三方共同进行推广活动。在推广活动中所收集的全部或部分个人信息可能会与该第三方分享。如果您不想让您的信息被分享，您可以通过不参加该推广活动而拒绝。
          (3)根据法律法规或政府的强制性规定，我们必须向有关司法或政府部门提供您的个人信息。
          (4)为了防止他人的合法权益或社会公共利益受到重大危害。
          (5)为了防止您的合法权益受
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    // 自定义验证规则
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.pwd2 !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pwd) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      uploadimageapi: this.uploadimageapi, //全局定义
      ruleForm: {
        username: "",
        qq: "",
        pwd: "",
        pwd2: "",
        nickname: "",
        sex: "",
        usericon: ""
      },
      rules: {
        pwd: [{ validator: validatePass, trigger: "blur" }],
        pwd2: [{ validator: validatePass2, trigger: "blur" }],
        username: [
          { required: true, message: "请输入手机号", trigger: "blur" },
        ],
        qq: [
          { required: true, message: "请输入QQ号", trigger: "blur" },
        ],
        nickname: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
          { min: 2, message: "长度至少两个字符", trigger: "blur" }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }]
      },
      radio: "1",
      imageUrl: "",
      checked: false,
      drawer: false,
      backgroundimage: {
        backgroundImage: "url(" + require("@/assets/images/bj.jpg") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%"
      }
    };
  },
  methods: {
    // 自动上传用户头像成功后执行的方法
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.ruleForm.usericon = res.path;
    },
    // 提交数据
    submitForm(formName) {
      const that = this;
      that.$refs[formName].validate(valid => {
        // console.log(valid)
        if (valid) {
          console.log(that.ruleForm);
          that.$http
            .post("/userregister", that.ruleForm)
            .then(res => {
              if (res.status == 204) {
                that.$message({
                  message: "注册成功",
                  type: "success"
                });
              } else {
                that.$message({
                  message: "上传失败...",
                  type: "error"
                });
              }
              // console.log(res);
              that.$router.push({ path: "/login" });
            })
            .catch(function() {});
        } else {
          that.$message({
            message: "请完善注册信息...",
            type: "error"
          });
        }
      });
    },
    resetForm(ruleForm) {
      this.$refs[ruleForm].resetFields();
    }
  }
};
</script>

<style scoped>
.register {
  width: 100%;
}
.registerbody {
  width: 1200px;
  margin: 0 auto;
}
.el-form {
  width: 600px;
  padding: 30px;
}
.el-form-item {
  margin-bottom: 18px;
}
.lab {
  margin: 100px;
  font-size: 16px;
  color: #606266;
}
.lab span {
  cursor: pointer;
  color: #6295ec;
}
.lab span:hover {
  color: #2b57a2;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
  background: #fff;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-drawer div {
  font-size: 15px;
  color: #555;
  margin: 10px;
  line-height: 1.6;
}
</style>